<!-- 这个页面是申请开票页面 -->
<template>
  <view class="page black-ground create-invoice-page invoice-page invoice-info-page">
    <div class="page-title">开票信息 Invoice Information</div>
    <div class="wrap">
      <div class="form-title">
        <div class="tl">开票合计金额 Total invoicing amount</div>
        <div class="te">
          <div class="money-box">
            <div class="prefix">¥</div>
            <input v-model="invoiceFormData.money" type="number" />
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="ul">
          <div class="li" :class="{ active: curInvo.id == item.id }" v-for="item in list" :key="item.id">
            <div class="info" @click="setCurInvo(item)">
              <div class="tl">{{ item.title }}</div>
              <div class="tl">{{ item.taxNum }}</div>
              <div class="tl">{{ item.email }}</div>
            </div>
            <div class="bottom-btn-box">
              <div class="left">
                <div class="btn" @click="toSetDefault(item)">
                  {{ item.isDefault == 1 ? '已设为默认发票信息' : '设为默认发票信息' }}
                </div>
              </div>
              <div class="right" style="display: flex">
                <div class="btn" style="margin-right: 20rpx" @click="toEdit(item.id)">修改</div>
                <div class="btn" @click="deleteItem(item.id)">删除</div>
              </div>
            </div>
          </div>
        </div>
        <div class="add-new-btn-box">
          <div class="add-new-btn" @click="toAdd">添加开票信息</div>
        </div>
      </div>
      <uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
    </div>
    <div class="bottom-control-box">
      <div class="bottom-control-container">
        <div class="wrap">
          <div class="left">
            <div class="btn" @click="back">取消 Cancel</div>
          </div>
          <div class="right" @click="confirmInvoice">
            <div class="btn">确认 Confirm</div>
          </div>
        </div>
        <bottom-safe-area></bottom-safe-area>
      </div>
      <div>
        <div style="height: 100rpx"></div>
        <bottom-safe-area></bottom-safe-area>
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { orderInfo } from '@/utils/api/order'
import { invoiceInfoList, invoiceInfoSetDefault, invoiceInfoDel } from '@/utils/api/invoice'
import { saveOrderInvoice } from '@/utils/api/invoice'
import store from '@/store'
let id: number = 0
let order = ref<any>({})

let invoiceFormData = ref<any>({})
let curInvo = ref<any>({})
const getInfo = async () => {
  const res = await orderInfo({ id })
  if (res.code === 200) {
    order.value = res.data
    invoiceFormData.value.money = res.data.payPrice
  }
}

let list = ref<any>([])
const toAdd = () => {
  uni.navigateTo({
    url: '/pages/createInvoiceInfo/createInvoiceInfo'
  })
}

let page: number = 1
let reload: boolean = true
let loading = ref<boolean>(false)
let noMore = ref<boolean>(false)

const loadData = async () => {
  if (loading.value || noMore.value) {
    return
  } else {
    loading.value = true
    let { code, data } = await invoiceInfoList({ current: page, size: 10 })
    loading.value = false
    if (code === 200) {
      if (reload) {
        list.value = data.list
        reload = false
      } else {
        list.value = [...list.value, ...data.list]
      }
      if (data.next) {
        page++
      } else {
        noMore.value = true
      }
    }
  }
}

const toSetDefault = async (item: any) => {
  if (item.isDefault !== 1) {
    const res = await invoiceInfoSetDefault({ id: item.id })
    if (res.code == 200) {
      initData()
    }
  }
}

const deleteItem = (id: string | number) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该发票信息吗？',
    success: async (res) => {
      if (res.confirm) {
        const res = await invoiceInfoDel({ id: id })
        if (res.code == 200) {
          initData()
        }
      }
    }
  })
}
const setCurInvo = (item) => {
  curInvo.value = item
  console.log('当前选择的信息', curInvo.value)
}

const toEdit = (id: string | number) => {
  uni.navigateTo({
    url: '/pages/createInvoiceInfo/createInvoiceInfo?id=' + id
  })
}

const back = () => {
  uni.navigateBack()
}

const saveInoiceForm = () => {}
const initData = () => {
  page = 1
  reload = true
  noMore.value = false
  loadData()
}

const confirmInvoice = async () => {
  if (!curInvo.value.id) {
    uni.showToast({
      title: '请选择发票信息',
      icon: 'none'
    })
  } else {
    invoiceFormData.value.clientUserId = store.state.user.userInfo.id
    invoiceFormData.value.taxId = curInvo.value.id
    invoiceFormData.value.taxNum = curInvo.value.id
    invoiceFormData.value.title = curInvo.value.title
    invoiceFormData.value.email = curInvo.value.email

    const res = await saveOrderInvoice(invoiceFormData.value)
    if (res.code === 200) {
      uni.showToast({
        title: '已申请'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 200)
    }
  }
}

let loaded: boolean = false

onLoad((opt) => {
  id = opt.id
  invoiceFormData.value.orderId = id
  getInfo()
  loaded = true
  initData()
})

onShow(() => {
  if (loaded) {
    loaded = false
  } else {
    initData()
  }
})
</script>

<style lang="scss" scoped>
@import './applyInvoice.scss';
@import '../invoiceInfo/invoiceInfo.scss';

.active {
  .info {
    .tl {
      text-decoration: underline;
    }
  }
}
</style>
